<template>
	<view class="content">
		<view>
			<image class="home_image" src="../../static/announcement_img.png"></image>
		</view>
		<view class="form_box">
			<view class="form_item">
				<view class="label">车辆型号</view>
				<view class="form_content">
					<input v-model="form.carDiy" placeholder-style="font-size:32rpx" placeholder="请输入车辆型号" />
				</view>
			</view>
			<view class="form_item">
				<view class="label">首次上牌</view>
				<view class="form_content">
					<picker mode="date" @change="(e)=>selectValue('time',e)">
						<view :class="form.time ? 'is_value_color' : 'no_value_color'">
							{{form.time || '请选择首次上牌时间'}}
						</view>
					</picker>
				</view>
			</view>
			<view class="form_item">
				<view class="label">所在城市</view>
				<view class="form_content">
					<pickers @address="e=>selectValue('czdssq',e)">
						<view :class="form.czdssq ? 'is_value_color' : 'no_value_color'">
							{{form.czdssq || '请选择所在城市'}}
						</view>
					</pickers>
				</view>
			</view>
			<view class="form_item">
				<view class="label">手机号码</view>
				<view class="form_content">
					<input type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="form_item">
				<view class="label">短信验证</view>
				<view class="form_content">
					<view class="verify_code_box">
						<input type="text" v-model="form.vcode" placeholder="请输入短信验证码">
						<view @click="onSendVerifyCode" :class="sendVerifyState ? 'btn_send_code' :'btn_code'">
							{{codeText}}
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="onSubmit">
				快速估值
			</view>
			<view class="bottom_text">
				<text>点击即代表同意</text>
				<text style="color: #FF3341;" @click="jump" >《个人信息保护声明》</text>
			</view>
		</view>
		<view class="flow_box card">
			<view class="flow_title">
				<image class="line" src="../../static/left_img.png"></image>
				<view>评估流程</view>
				<image class="line" src="../../static/right_img.png"></image>
			</view>
			<view class="flow_content">
				<view class="item">
					<image src="../../static/submit_icon.png"></image>
					<view>提交信息</view>
				</view>
				<image class="process_icon" src="../../static/process_icon.png"></image>
				<view class="item">
					<image src="../../static/await_icon.png"></image>
					<view>等待客服联系</view>
				</view>
				<image class="process_icon" src="../../static/process_icon.png"></image>
				<view class="item">
					<image src="../../static/deal_icon.png"></image>
					<view>交易成功</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { submitAssess } from '../../api/common';
	import {
		getSmsVcode
	} from '../../api/login';
	import pickers from '../../components/ming-picker/ming-picker.vue';

	export default {
		components: {
			pickers
		},
		data() {
			return {
				form: {
					time: '',
					czdssq: '',
					czdssq: '',
					phone: '',
					vcode: '',
				},
				sendVerifyState: false,
				codeText: '获取验证码',
				verifyCount: 60,
				range: [],
				selectIndex: [0, 0, 0]
			}
		},
		mounted() {
			// const result = setArea(arae);
			// console.log(result)

		},
		methods: {
			jump(){
				uni.navigateTo({
					url:'/pages/aboutMy/index?title=个人信息保护声明&type=3'
				})
			},
			async onSubmit() {
				if(!this.form.carDiy){
					return uni.showToast({
						title:'请填写车辆品牌',
						icon:"none"
					})
				}else if(!this.form.czdssq){
					return uni.showToast({
						title:'请选择所在城市',
						icon:"none"
					})
				}else if(!this.form.phone){
					return uni.showToast({
						title:'请填写手机号',
						icon:"none"
					})
				}else if(!this.form.vcode){
					return uni.showToast({
						title:'请填写验证码',
						icon:"none"
					})
				}else{
					await submitAssess(this.form).then(res=>{
						uni.redirectTo({
							url:'/pages/success/index'
						});
					}).catch(err=>{
						uni.showToast({
							title:err,
							icon:"none"
						})
					})
				}
			},
			selectValue(key, val) {
				if (key === 'czdssq') {
					this.form[key] = val.value.join('-');
				} else {
					this.form[key] = val.detail.value;
				}
				this.$forceUpdate()
			},
			async onSendVerifyCode() {
				if(!this.form.phone){
					return uni.showToast({
						title:'请填写手机号',
						icon:"none"
					})
				}
				this.sendVerifyState = true;
				if (this.verifyCount === 60 && this.sendVerifyState) {
					let flag = setInterval(() => {
						this.verifyCount--;
						this.codeText = `${this.verifyCount}秒`;
						if (this.verifyCount === 1) {
							this.codeText = '获取验证码';
							this.sendVerifyState = false;
							this.verifyCount = 60;
							clearInterval(flag);
						}
					}, 1000);
					await getSmsVcode({
						phone: this.form.phone
					}).then(res=>{
						uni.showToast({
							icon: 'none',
							title: '发送成功，请耐心等待短信'
						})
					}).catch(err=>{
						uni.showToast({
							title:err,
							icon:"none"
						})
					})
					
				} else {
					uni.showToast({
						title: '请耐心等待倒计时结束',
						icon: 'none'
					})
				}
			},
			/**
			 * @param {Array} array 
			 * @param {Object} formValues
			 * @returns Promise
			 **/
			verifyForm(array, formValues) {
				return new Promise((resolve, reject) => {
					let result = true;
					for (let index = 0; index < array.length; index++) {
						const formItem = array[index];
						if (!formValues[formItem.name]) {
							result = false;
							uni.showToast({
								title: formItem.message,
								icon: 'none'
							});
							break;
						}
					}
					if (result) resolve({
						...formValues
					});
					else reject(false);
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="less" scoped>
	.home_image {
		width: 100%;
		height: 240rpx;
	}

	.is_value_color {
		color: #292929;
	}

	.no_value_color {
		color: #999999;
	}

	.form_box {
		width: 100%;
		background-color: #fff;
		padding-bottom: 48rpx;

		.form_item {
			display: flex;
			align-items: center;
			width: 95%;
			padding: 48rpx 0;
			margin: auto;
			border-bottom: 1rpx solid #F5F5F5;

			.label {
				width: 20%;
				font-size: 32rpx;
				font-weight: 500;
				color: #292929;
			}

			.form_content {
				width: 80%;
				font-size: 32rpx;
				text-align: right;

				.verify_code_box {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn_send_code,
					.btn_code {
						width: 152rpx;
						line-height: 56rpx;
						text-align: center;
						margin-left: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						background: #FF3341;
						border-radius: 8rpx;
					}

					.btn_send_code {
						width: 152rpx;
						height: 56rpx;
						background: rgba(255, 51, 65, 0.08);
						color: #FF3341;
					}
				}
			}
		}

		.btn {
			margin: 48rpx auto 0 auto;
			width: 430rpx;
			line-height: 104rpx;
			background: linear-gradient(135deg, #FF8533 0%, #FF0011 100%);
			border-radius: 52rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}

		.bottom_text {
			margin: 24rpx 0;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #B8B8B8;
		}
	}

	.flow_box {
		padding: 48rpx 0;
		margin: 24rpx 0;
		width: 100%;

		.flow_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 500;
			font-size: 32rpx;
			color: #292929;
			padding: 0 24rpx;

			.line {
				width: 246rpx;
				height: 12rpx;
			}
		}

		.flow_content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			margin-top: 48rpx;

			.process_icon {
				width: 40rpx;
				height: 40rpx;
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 186rpx;
				height: 132rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}
		}

	}
</style>